<script setup>
import { ref, onMounted } from 'vue'
import { requireImg } from '@/utils/common'

const navList = ref([
  {
    title: '上游企业',
    type: {
      材料: '复核材料轻量化',
      硬件组件: '整机设计、传感器、电池与动力系统',
      软件技术: '飞控系统、通信与导航设施'
    }
  },
  {
    title: '中游企业',
    type: {
      总装集成: '直升机、无人机、eVTOL(电动垂直起降飞行器)'
    }
  },
  {
    title: '下游企业',
    type: {
      新型基础设施: '地面系统、通导遥、起降设施、空管系统',
      运营及服务: '运营分成、飞行培训、服务咨询、整机销售',
      空中飞行保障: '飞行保障、低空服务平台、无人机反制、空中交通管制服务',
      应用场景: '物流、旅游、农业植保、应急救援、巡检、消防、智慧城市'
    }
  }
])
const navbar = ref(navList.value[2].title)
const contentJson = ref(navList.value[2].type)
const choseBar = (item) => {
  navbar.value = item.title
  contentJson.value = item.type
}
</script>

<template>
  <div class="card">
    <CommonTitle title="产业架构" />
    <div class="navbox">
      <p
        v-for="(item, index) in navList"
        :key="index"
        @click="choseBar(item)"
        :class="{ active: navbar == item.title }"
      >
        {{ item.title }}
      </p>
    </div>
    <div class="thead">
      <p>类别</p>
      <p>细分类别</p>
    </div>
    <div class="content">
      <div class="left">
        <p v-for="(v, k) in contentJson" :key="k">{{ k }}</p>
      </div>
      <div class="right">
        <p v-for="(v, k) in contentJson" :key="k" v-html="v"></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 15px;

  .navbox {
    display: flex;
    margin: 12px 20px;

    p {
      flex: 1;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: #85b9cb;
      cursor: pointer;
      background: url('@img/industry/nochose.png');
      background-size: 100% 100%;

      &.active {
        color: #fff;
        background: url('@img/industry/chosed.png');
        background-size: 100% 100%;
      }
    }
  }

  .thead {
    height: 45px;
    margin: 0 20px;
    display: flex;
    background: url('@img/industry/thead_bg.png');
    background-size: 100% 100%;
    p {
      flex: 1;
      text-align: center;
      line-height: 45px;
      color: #cff7ff;

      &:last-child {
        flex: 2;
      }
    }
  }

  .content {
    display: flex;
    margin: 20px;

    .left {
      width: 142px;
      background: url('@img/industry/overview_left.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;

      p {
        height: 100px;
        padding: 12px 15px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 40px;
        color: #fff;
      }
    }

    .right {
      flex: 1;
      margin-left: 6px;
      p {
        height: 100px;
        padding: 12px 15px;
        display: flex;
        align-items: center;
        background: rgba(0, 213, 255, 0.1);

        :deep {
          i {
            color: #ffe100;
            font-style: normal;
          }
        }

        &:nth-child(even) {
          background: rgba(28, 115, 132, 0.1);
        }
      }
    }
  }
}
</style>
